<template>
  <view class="content"
    v-if="info.fUserName">
	<u-navbar :is-back="false" title="订单详情"
	  title-size="30"
	  :background="{background:'#2B88FE' }"
	  title-color="#fff">
	  <div class="head_icon">
	    <u-icon @click="$api.handleBackTo"
	      name="arrow-left" color="#fff"
	      size="36">
	    </u-icon>
	    <u-icon @click="$api.handleHomeTo"
	      name="home" color="#fff" size="36">
	    </u-icon>
	  </div>
	</u-navbar>
    <view
      class="topBox whiteBg u-skeleton">
      <view
        class="store borderBottom x-row"
        @click="gotoStoreIndex">
        <image
          :src="$api.MrkImg(info.fMrkId)"
          class="simg x-col-center u-skeleton-circle">
        </image>
        <view
          class="x-col sname x-col-center u-skeleton-rect">
          {{info.fMrkName}}
          <view class="khmc">
            联系电话：{{info.fTell}}
          </view>
        </view>
        <view
          class="status x-col-center">
          
          <view  
            :class="info.fStatus==10?'yi':'wei'">
            {{$api.getOrderStatus(info.fStatus)}}
          </view>
        </view>
      </view>
      <view
        class="info  x-row">
        <view class="x-col">
          <view
            class="itxt u-skeleton-rect">
            <view class="s1">
              进货单号</view>
            {{info.fOrderNo}}
          </view>
          <view
            class="itxt u-skeleton-rect">
            <view class="s1">
              应付款</view>¥
            {{info.fMoney}}
            <view class="yhj"
              v-if="fPriceType">
              {{priceType}}
            </view>
          </view>
          <view
            class="itxt u-skeleton-rect">
            <view class="s1">
              已付款</view>¥
            {{info.fPayMoney}}
            <view
              v-if="info.OrderPayList.length"
              class="mingxi"
              @click="showPayHistory=true">
              查看明细<text
                class="iconfont icond-arrow-right"></text>
            </view>
          </view>
          <view
            class="itxt u-skeleton-rect">
            <view class="s1">
              待付款</view>¥
            {{info.fWaitMoney}}
          </view>
          <view
            class="itxt u-skeleton-rect">
            <view class="s1">
              订购时间</view>
            {{info.fCreateTime}}
          </view>
		  <view class="itxt">
		    <view class="s1 u-skeleton-fillet">
		      填报人：</view>
		    {{info.fUserName}}
		  </view>
          <view
            class="itxt u-skeleton-rect"
            v-if="info.desc">
            <view class="s1">
              审核说明</view>
            {{info.desc}}
          </view>

        </view>
		 </view>
		
		<view
		  class="info  x-row">
		<view class="x-col"    v-if="info.fDeyStatus!=0">
		 
		  <view
		    class="itxt u-skeleton-rect">
		    <view class="s1">
		      送货车辆</view>
		    {{info.fDeyCarNo}}
			<view
			  v-if="info.fStatus==2 && info.iIsMyDef==1"
			  class="mingxi"
			  @click="CancelCarTask">
			  退回任务<text
			    class="iconfont icond-arrow-right"></text>
		  </view>
		  <view
		    class="itxt u-skeleton-rect">
		    <view class="s1">
		      送货状态</view>
		     {{$api.getDefStatus(info.fDeyStatus)}} 
			 
			 <view
			   v-if="info.fDeyStatus==10 && info.iIsMyDef==1 &&  info.fReportStatus==0"
			   class="mingxi" @click="EditCarTask">
			   修改信息<text class="iconfont icond-arrow-right"></text>
			 </view>
				 
		  </view>
		  <view   v-if="info.fDeyStatus==10"
		    class="itxt u-skeleton-rect">
		    <view class="s1">
		      送达时间</view>
		    {{info.fDeyTime}}  
		  </view>
		  <view   v-if="info.fDeyStatus==10"
		    class="itxt u-skeleton-rect">
		    <view class="s1">
		      送达收款</view>
		    {{info.deypaymoney}}  
		  </view>
		 </view>
		
      </view>




    </view>
    <view class="h16"></view>
    <view
      class="topheader u-skeleton-rect">
      <view class="x-row">
        <view
          class="titel x-col">
          销售人员</view>
        <view
          class="rightimg x-col-center"
          style="padding-right: 40rpx;">
          <image
            :src="`${img}images/user/${item.fUserId}.jpg`"
            v-for="(item,index) in info.OrderSellUserList"
            :key="index"
            class="img60">
          </image>
        </view>
        <u-icon
          name="arrow-right"
          color="#979797"
          size="26rpx">
        </u-icon>
      </view>
    </view>
    <view
      class="topheader x-row "
      style="border: 0; display: ;"
      @click="imgshow">
      <view
        class="titel x-col">
        订单凭证</view>
      <view
        class="upimg x-col-center">
        <view class="addBtn">
          查看图片</view>
      </view>
      <u-icon
        name="arrow-right"
        color="#979797"
        size="26rpx"
        class="x-col-center">
      </u-icon>
    </view>
    <view class="h16"></view>
    <!-- <view class="topheader ">
			<navigator class="x-row" url="./personnellist_show" hover-class="none">
				<view class="titel x-col">司机人员</view>
				<view class="rightimg x-col-center">
					<image src="../../static/logo.png" v-for="(item,index) in 3" :key="index" class="img60"></image>
				</view>
				<u-icon name="arrow-right" color="#979797" size="26rpx"></u-icon>
			</navigator>
		</view> -->
    <approval
      :list="info.admin"
      :now_id="info.now_id">
    </approval>
    <view class="h16"
      v-if="info.admin">
    </view>
    <view
      class="interval u-skeleton-rect">
      进货商品</view>
    <view class="listgoods"
      v-for="(g,index) in info.OrderProList"
      :key="index">
      <view class="x-row">
        <image
          :src="`${img}images/product/${g.fProId}.jpg`"
          class="goodsimg ">
        </image>
        <view class="x-col">

          <view   class="goodstitel ">
            {{g.fProName}}
          </view>
        <view class="nuber">
            单位： {{g.fUnit}} 
          </view>
          <view class="nuber">
            数量：{{g.fCount}}   <span  v-if="g.fCoverCount>0 || g.fGiveCount>0 || g.fExcCount>0 || g.fRetCount>0"> 
			 (<span v-if="g.fCoverCount>0"> 盖子：{{g.fCoverCount}}  &#32&#32  &#32&#32 </span> 
			  <span v-if="g.fGiveCount>0">搭赠：{{g.fGiveCount}}  &#32&#32  &#32&#32  </span> 
			  <span v-if="g.fExcCount>0">调换：{{g.fExcCount}} &#32&#32  &#32&#32</span>
			    <span v-if="g.fRetCount>0">退货：{{g.fRetCount}}</span>)</span>  
          </view>
		  <view class="nuber" v-if="g.fDeyStatus==10">
		    送达数量：{{g.fDefCount}}
		  </view>
          <view class="nuber"
            v-if="info.iIsMyDef==1">
            车上库存：{{g.fBeCount}}
          </view>
          <!--判断是配送者才显示这个一个项，如果不是不显示 如果不是不显示 fDeyUserId 这个字段和当前用户是同一个值-->
          <view class="x-row">
            <view
              class="time">
              价格：{{g.fPrice}}
            </view>
            <view
              class="x-col">
            </view>
            <view
              class="prme">
              ¥{{g.fMoney}}
            </view>
          </view>
        </view>
      </view>
    </view>
  
 <div class="footer">

        <view
          v-if="action==='order'">
          <u-button
            type="primary"
            size="medium"
            v-if="info.fStatus==2 && info.iIsMyDef==1"
            @click="nowSend">
            立即送达
          </u-button>
            <!-- <u-button
            type="primary"
            size="medium"
            v-else>
            {{$api.getOrderStatus(info.fStatus)}}
          </u-button>-->
        </view>
        <view v-else>
          <u-button
            type="primary"
            size="medium"
            v-if="info.fStatus==2 && info.iIsMyDef==1"
            @click="nowSend">
            立即送达
          </u-button>
          <!--判断是配送者才显示这个一个项，如果不是不显示 fDeyUserId 这个字段和当前用户是同一个值-->
         <!--  <u-button
            type="primary"
            size="medium"
            v-else>
            {{$api.getTaskStatus(info.fStatus)}}
          </u-button>-->
        </view>
	 
		<u-button
		  type="primary"
		  size="medium"
		  v-if="info.fStatus==1 && info.iIsMyAdd==1"
		  @click="editdata">
		  编辑
		</u-button>
		<u-button
		  type="primary"
		  size="medium"
		  v-if="info.fStatus==1 && info.iIsMyAdd==1"
		  @click="cancedata">
		  作废
		</u-button>
		<u-button
		  type="primary"
		  size="medium"
		  v-if="info.fReportStatus==1 && info.iIsOffice==10 && info.fDeyStatus==10"
		  @click="OfficePass">
		  订单审核
		</u-button>
		
        <u-button
          type="primary"
          size="medium"
          v-if="info.fStatus==3 || info.fStatus==4"
          @click="showPay=true">
          立即支付
        </u-button>
 </div>	


 
    <u-modal
      v-model="showPayHistory"
      title="支付记录"
      width="100%"
      confirm-text="关闭">
      <view
        style="padding:30rpx 0">
        <u-table>
          <u-tr>
            <u-th width="40%">
              支付日期</u-th>
            <u-th>支付金额</u-th>
            <u-th>支付方式</u-th>
            <u-th>收款人</u-th>
          </u-tr>
          <u-tr
            v-for="(item,index) in info.OrderPayList"
            :key="index">
            <u-td width="40%">
              {{item.fPayTime}}
            </u-td>
            <u-td>
              {{item.fPayMoney}}
            </u-td>
            <u-td>
              {{PriceType2[item.fPayType].label}}
            </u-td>
            <u-td>
              {{item.fUserName}}
            </u-td>
          </u-tr>
        </u-table>
      </view>
      <u-empty text="暂无数据"
        mode="list"
        v-if="!info.OrderPayList.length">
      </u-empty>
    </u-modal>
	<!--添加支付记录-->
    <u-modal v-model="showPay"
      @confirm="confirmPay"
      :title-style="{color: '#191F25'}"
      title="支付订单" width="70%"
      :show-cancel-button="true"
      confirm-text="确定支付"
      cancel-text="关闭取消"
      cancel-color="#3296FA"
      confirm-color="#3296FA">
      <u-cell-group>
        <u-cell-item
          title="支付金额"
          :arrow="false">
          <input
            slot="right-icon"
            v-model="payInfo.PayMoney"
            class="priceipt"
            placeholder="请输入支付金额" />
        </u-cell-item>
        <u-cell-item
          @click="show=true"
          title="支付方式"
          :value="PriceType[payInfo.PayType].label">
        </u-cell-item>
        <navigator
          url="/pages/sale/ordervoucher">
          <u-cell-item
            :value="payImgText"
            title="支付凭据">
          </u-cell-item>
        </navigator>
        <u-cell-item
          title="备注"
          :arrow="false">
          <input
            slot="right-icon"
            type="textarea"
            v-model="payInfo.payInfo"
            class="priceipt"
            placeholder="请输入备注" />
        </u-cell-item>
      </u-cell-group>
      <view
        class="slot-content">
        <u-select
          @confirm="confirm"
          v-model="show"
          :list="PriceType">
        </u-select>
        <view class="ts">
          订单应支付¥{{info.fMoney}}，订单支付状态可在进货订单中查看
        </view>
      </view>
    </u-modal>
  
    
	
	
	<u-skeleton
      :loading="loading"
      :animation="true"
      bgColor="#FFF">
    </u-skeleton>
  </view>
</template>

<script>
import approval from '../../components/approval'
export default {
  components: {
    approval
  },
  data() {
    return {
      showPayHistory: false,
      PriceType: [
        {
          label: '现金',
          value: 0
        },
        {
          label: '微信',
          value: 1
        },
        {
          label: '银行转账',
          value: 2
        } 
      ],
	  PriceType2: [
	    {
	      label: '现金',
	      value: 0
	    },
	    {
	      label: '微信',
	      value: 1
	    },
	    {
	      label: '银行转账',
	      value: 2
	    },
	  		{
	  		  label: '退款',
	  		  value: 3
	  		} ,
	  		{
	  		  label: '其他',
	  		  value: 4
	  		} 
	  ],
      payInfo: {
        OrderId: 0,
		OrderOrWill:1,
		MrkId:0,
        PayType: 0,
        PayInfo: '',
        PayPic: '',
        PayMoney: ''
      } ,
	  
      img: this.urlimg,
      height: this.but_height(),
      dats: new Date(),
      taskId: '',
      OrderId: '',
      info: {},
      showPay: false,
	  showOffice: false,
      prc: '',
      action: '', //sj 司机 表示只查看，只能支付
      utype: '',
      show: false,
      loading: true
    }
  },
  onLoad(e) {
    this.OrderId = e.id
    this.taskId = e.taskId
    this.action = e.status
    if (e.status === 'order') {
      uni.setNavigationBarTitle({
        title: '订单详情'
      })
    } else {
      uni.setNavigationBarTitle({
        title: '配送任务详情'
      })
    }
    this.orderInfo()
  },
  methods: {
    confirm(e) {
      this.payInfo.PayType = e[0].value
    },
    nowSend() {
      // order/nowDelivery 				立即送达
      uni.navigateTo({
        url: `/pages/driver/sendOrder?id=${this.OrderId}&tsakId=${this.taskId}&status=add`
      })
    },
	editdata() {
	  // order/nowDelivery 				立即送达
	  uni.navigateTo({
	    url: `/pages/sale/productstobepuredit?id=${this.OrderId}`
	  })
	},
	OfficePass()
	{
		uni.navigateTo({
		  url: `/pages/manage/OrderPassAdd?id=${this.OrderId}`
		})
	},
	EditCarTask()
	{
		uni.navigateTo({
		  url: `/pages/driver/EditSendOrder?id=${this.OrderId}&tsakId=${this.taskId}&status=edit`
		})
	},
	CancelCarTask()
		{
			let that = this
			uni.showModal({
			  title: '确认退回任务吗',
			  success(res) {
			    if (res.confirm) {
			      
			      that.$axios('api/OrderBasic/CancelCarTask', 'post', { value: that.OrderId }).then(res => {
			         if (!res.Success) {
			           uni.showToast({
			             title: '提交失败：' + res.Message,
			             icon: 'none',
			             duration: 2000
			           })
			           return false
			         }
			          that.$api.handleToUrl('退回成功', '/pages/order/order')
			       })
			    }
			  }
			})
			
			
		},
	cancedata()
	{
		let that = this
		uni.showModal({
		  title: '确认作废吗',
		  success(res) {
		    if (res.confirm) {
		      
		      that.$axios('api/OrderBasic/DeleteDetail', 'post', { value: that.OrderId }).then(res => {
		         if (!res.Success) {
		           uni.showToast({
		             title: '提交失败：' + res.Message,
		             icon: 'none',
		             duration: 2000
		           })
		           return false
		         }
		          that.$api.handleToUrl('取消成功', '/pages/order/order')
		       })
		    }
		  }
		})
		
		

	},
	
    gotoStoreIndex() {
      uni.navigateTo({
        url: '/pages/my_customer/my_customer_client?id=' + this.info.fMrkId + '&taskId=' + this.taskId
      })
    },
    // pay/pay 			常规订单支付
    confirmPay() {
      let that = this
      if (!this.payInfo.PayMoney) {
        uni.showToast({
          title: '请输入付款金额',
          icon: 'none'
        })
        return
      }
	  this.payInfo.PayType=this.payInfo.PayType+1
      this.payInfo.PayPic = this.payInfo.PayPic.map(x => x.sFileUrl).toString()
      this.$axios('api/OrderPay/AddDetail', 'post', { value: this.payInfo }).then(res => {
		  if (!res.Success) {
		    uni.showToast({
		      title: '提交失败：'+res.Message,
		      icon: 'none',
		      duration: 2000
		    })
		    return false
		  }
		  
        that.orderInfo()
        uni.showToast({
          title: '付款提交成功'
        })
        // const pages = getCurrentPages() //获取页面栈
        // const beforePage = pages[pages.length - 2] //前一个页面
        // beforePage.$vm.defaultData()
        // beforePage.$vm.getList()
      })
    },
 
    topayDetail() {
      this.$api.navigator('payDetail?id=' + this.orderid)
    },
    orderInfo() {
      let that = this
      that.loading = true
      this.$axios('api/OrderBasic/GetAllDetail', 'post', { value: this.OrderId })
        .then(res => {
          console.log(res.Value, 888)
          if (!res.Value) return
          that.payInfo.OrderId = res.Value.fId
		  that.payInfo.PayMoney = res.Value.fWaitMoney
		  that.payInfo.MrkId = res.Value.fMrkId
          that.info = res.Value
          that.loading = false
        })
        .then(() => {
          if (Number(this.taskId)) {
           // this.$axios('api/CarDeyTask/GetDetail', 'post', { value: this.taskId }).then(res => {
           //   that.info.fStatus = res.Value.fStatus
          //  })
          }
        })
    },
    imgshow() {
      let arr = [this.urlimg + this.info.fPic]
      uni.previewImage({
        urls: arr,
        current: arr[0]
      })
    }
  },
  computed: {
    fPriceType() {
      let i = this.info.fPriceType
      if (i == 2) return '折扣价'
      else if (i == 3) return 'Vip价'
      else return ''
    },
    payImgText() {
      let num = this.payInfo.PayPic
      return num ? num.length : 0 + '张凭借'
    }
  },
  onShow() {
    if (getApp().globalData.sureSelectImg) {
      this.payInfo.PayPic = getApp().globalData.sureSelectImg
    }
  }
  //onHide:{},  //监听页面隐藏
  //onUnload:{},	//监听页面卸载
  //onPullDownRefresh:{},  //监听用户下拉动作，一般用于下拉刷新  page.json  "enablePullDownRefresh":true,//开启下拉刷新
  //onReachBottom:{}, //页面滚动到底部
  //onShareAppMessage:{}, 用户点击右上角分享
}
</script>

<style scoped lang="scss">
.h16 {
  height: 16rpx;
  background-color: #f5f7f9;
}
.status {
  font-size: 32rpx;
  color: #007aff;
  padding-left: 10rpx;
}
.slot-content {
  padding: 24rpx 48rpx;
  box-sizing: border-box;
  .priceipt {
    background: #f8f9fc;
    padding: 0 20rpx;
    box-sizing: border-box;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
  }
  .ts {
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    line-height: 36rpx;
    // margin-bottom: 32rpx;
  }
}
.topBox {
  .info {
    padding: 32rpx 32rpx 16rpx 32rpx;
    box-sizing: border-box;

    .itxt {
      padding-bottom: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #34404a;
      line-height: 40rpx;

      .s1 {
        width: 160rpx;
        color: #979797;
        font-size: 32rpx;
        display: inline-block;
      }

      .yhj {
        width: 96rpx;
        height: 40rpx;
        text-align: center;
        border-radius: 20rpx;
        display: inline-block;
        line-height: 40rpx;
        border: 2rpx solid #2b88fe;
        font-size: 28rpx;
        color: #2b88fe;
        margin-left: 16rpx;
      }

      .mingxi {
        font-weight: 400;
        color: #2b88fe;
        line-height: 42rpx;

        .iconfont {
          font-size: 25rpx;
        }

        display: inline-block;
        margin-left: 16rpx;
      }
    }
  }

  .store {
    padding: 24rpx 32rpx;
    box-sizing: border-box;

    .simg {
      width: 96rpx;
      height: 96rpx;
      margin-right: 16rpx;
      background-color: #f2f2f2;
      border-radius: 10rpx;
    }

    .sname {
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
      line-height: 36rpx;
      padding: 0 20rpx 0 0;
    }

    .khmc {
      padding-top: 10rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
    }

    .pay {
      width: 144rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #1677ff;
      border-radius: 32rpx;
      border: 1rpx solid #2b88fe;
    }

    .iconyou {
      color: #999999;
    }
  }
}

.topheader {
  padding: 0 32upx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.titel {
  color: #34404a;
  font-size: 32upx;
  padding: 32upx 0;
}

.img60 {
  width: 60upx;
  height: 60upx;
  border-radius: 30upx;
}

.img60:nth-child(1) {
  transform: translateX(60upx);
}

.img60:nth-child(2) {
  transform: translateX(30upx);
}

.imgadd {
  width: 26upx;
  height: 26upx;
  display: block;
}

.bu_text {
  color: #2b88fe;
  font-size: 28upx;
  padding-left: 10upx;
}

.addBtn {
  color: #999;
}

.price {
  color: #eb3e00;
  font-size: 32upx;
}

.label {
  color: #2b88fe;
  border: 1px solid #2b88fe;
  padding: 3upx 10upx;
  border-radius: 30upx;
  font-size: 24upx;
  margin-left: 10upx;
}

.interval {
  color: #333;
  font-size: 32upx;
  line-height: 110upx;
  padding: 0 32upx;
}

.listgoods {
  padding: 32upx;
  border-bottom: 1px solid #f8f8f8;
}

.goodsimg {
  width: 144upx;
  height: 144upx;
  display: block;
  margin-right: 24upx;
}

.goodstitel {
  color: #000;
  font-size: 32upx;
}

.rights {
  color: #000;
  font-size: 333;
  font-size: 32upx;
}

.nuber {
  color: #666;
  font-size: 28upx;
  padding-top: 10upx;
}

.time {
  color: #666;
}

.prme {
  color: #000;
  font-size: 32upx;
  font-weight: bold;
}

.viewbbutton {
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;
  .x-row {
    display: flex;
    justify-content: center;
    ::v-deep button {
      margin: 0 20rpx;
    }
  }
}

.buttom {
  width: 95%;
  background: #007aff;
  border-radius: 16upx;
  text-align: center;
  line-height: 80upx;
  margin: auto;
  margin-top: 10upx;
  color: #fff;
  font-size: 32upx;
}
.leftbut {
  border: 1px solid #999;
  text-align: center;
  font-size: 32upx;
  color: #333;
  line-height: 80upx;
  border-radius: 16upx;
}
.right {
  border-color: #007aff;
  color: #fff;
  background: #007aff;
}
u-button + u-button {
  margin-left: 10rpx;
}

  .footer {
    margin-top: 32rpx;
    display: flex;
    justify-content: center;
    position: sticky;
    bottom: 2%;
    u-button,
    .u-btn {
      width: 40%;
    }
    u-button + u-button {
      margin-left: 30rpx;
    }
  }
</style>
